<template>
    <div class="page my">
        <div class="header_bar">
            <div class="title">我的</div>
        </div>
        <div class="header gshadow flex_space_between">
            <div class="flex_center">
                <div class="left"></div>
                <div class="right">
                    <template v-if="userInfo && userInfo.userToken">
                        <div class="title_text">
                            <span>{{userInfo.mobilePhone}}</span>
                            <!-- <tag type="warning" style="marginLeft:20px" plain>已认证</tag> -->
                        </div>
                        <div class="desc">{{userInfo.userName}}</div>
                    </template>
                    <template v-else>
                        <div class="title_text" @click="navPushTo('/login')">
                            <span>登录/注册</span>
                        </div>
                    </template>
                </div>
            </div>
            <div class="icon"></div>
        </div>

        <van-cell-group title=" ">
            <van-cell title="商户信息" icon="setting-o" is-link @click="navPushTo('/merchantsInfo')" />
            <van-cell title="我的费率" icon="shop-o" is-link @click="navPushTo('/myRate')"></van-cell>
            <van-cell title="店员管理" icon="shop-o" is-link @click="navPushTo('/staffHome')"></van-cell>
            <van-cell title="我要成为服务商" icon="shop-o" is-link @click="navPushTo('/accountUpgrade')"></van-cell>
        </van-cell-group>

        <van-cell-group title=" ">
            <van-cell title="常见问题" icon="shop-o" is-link @click="navPushTo('/question')"></van-cell>
            <van-cell title="联系我们" icon="shop-o" is-link @click="navPushTo('/404')"></van-cell>
            <van-cell title="版本信息" icon="shop-o" value="1.0.0"></van-cell>
        </van-cell-group>

        <van-cell-group title=" " v-if="userInfo && userInfo.userToken">
            <van-cell title="密码重置" icon="shop-o" is-link @click="navPushTo('/resetpwd')"></van-cell>
            <van-cell title="退出登录" icon="shop-o" is-link @click="logout"></van-cell>
        </van-cell-group>
    </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from "vuex";
import { Tag } from 'vant';

export default {
    components: { Tag },

    methods: {
        ...mapMutations({
            setUserInfo: "setUserInfo"
        }),

        // 跳转到
        navPushTo(path) {
            this.$router.push(path);
        },

        // 退出登录
        logout() {
            this.$store.dispatch("logout").then(() => {
                this.$router.replace("/login")
            });
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo
        }),
        ...mapGetters(["userInfo"])
    }
};
</script>

<style lang="scss" scoped>
@import "@/assets/color.scss";

.my {
    padding-top: 50px;
    padding-bottom: 80px;
    .header {
        background-color: $BG_COLOR;
        color: #fff;
        padding: 20px 20px;
        .left {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            background-color: #f0f0f0;
        }
        .right {
            padding-left: 20px;
            .title_text {
                font-size: 20px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
            .desc {
                font-size: 16px;
            }
        }
    }
}
</style>